<template>
  <div id="app">
    <common-header v-if="isPcRouteName" :path-name="$route.name"></common-header>
    <div :class="isPcRouteName?'content-box':''">
      <router-view v-wechat-title="$route.meta.title"></router-view>
    </div>
    <common-bottom v-if="isPcRouteName"></common-bottom>
  </div>
</template>

<script>
  import {
    isMobile
  } from "@/assets/js/location";
  import CommonHeader from "@/components/CommonHeader";
  import CommonBottom from "@/components/CommonBottom";
  import {
    mapMutations
  } from "vuex";

  export default {
    name: "App",
    components: {
      CommonHeader,
      CommonBottom,
    },
    data() {
      return {
        // isPcRouteName: true
      }
    },
    activated() {
      localStorage.removeItem("token01");
    },
    mounted() {
      this.setToken()
      this.changeUrl()

      // 监听浏览器关闭
      window.addEventListener("beforeunload", () => this.beforeunloadHandler());
      window.addEventListener("unload", () => this.unloadHandler());
      window.addEventListener("pagehide", () => this.unloadHandler());
    },
    methods: {
      ...mapMutations(['setLoginState']),
      changeUrl() {
        if (this.$route.name) {
          if (isMobile() && this.isPcRouteName) {
            this.$router.replace({
              name: "wap-" + this.$route.name,
              query: this.$route.query
            });
          } else if (!isMobile() && !this.isPcRouteName) {
            this.$router.replace({
              name: this.$route.name.slice(4),
              query: this.$route.query
            });
          } else {}
        }
      },
      setToken() {
        let token = localStorage.getItem('token')

        if (token) {
          this.setLoginState({
            key: 'isLogin',
            value: true
          })
          this.setLoginState({
            key: 'token',
            value: token
          })
        }
      },

      // 关闭窗口之前执行
      beforeunloadHandler() {
        this.beforeUnload_time = new Date().getTime();
      },
      unloadHandler() {
        this.gap_time = new Date().getTime() - this.beforeUnload_time;
        localStorage.setItem("t01", this.gap_time);
        //判断是窗口关闭还是刷新 毫秒数判断 网上大部分写的是5
        if (this.gap_time < 5) {
          // 退出登录接口 这里应当换为个人的登出方法
          localStorage.removeItem("token");
          localStorage.removeItem('password_status');
          localStorage.removeItem('password_status_message');

          this.clearLogin().then((res) => {
            this.$router.push({
              name: "index",
            });
          });
        }
      },
    },
    watch: {
      $route(to) {
        this.changeUrl()
      },

    },
    computed: {
      isPcRouteName: function() {
        if (!!this.$route.name && this.$route.name.indexOf("wap-") == -1) {
          return true
        } else {
          return false
        }
      }
    },
    unmounted() { //vue可换为destroyed()生命周期，不过这个也可以用
      // 移除监听
      window.removeEventListener("beforeunload", () => this.beforeunloadHandler());
      window.removeEventListener("unload", () => this.unloadHandler());
      window.removeEventListener("pagehide", () => this.unloadHandler());
    },
  };
</script>

<style>
  @import url("./assets/css/reset.css");
  @import url("./assets/css/common.css");
  @import url("./assets/css/animate.css");
</style>
